<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./Alibabafont/iconfont.css">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
   <script src="/myjs/jquery-1.11.1.js"></script>
<style>
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}body,button,input,select,textarea{font:12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}small{font-size:12px}ol,ul{list-style:none}a{text-decoration:none}up{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}
</style>
</head>
<body>
 <header>
	<img src="./img/biaoti.png">
	<div class="input-t">
		<p>找找宝贝</p>
	</div>
 </header>
<div class="juzhong" style="margin-top: 0"><!--嘿 ！>>>居中-->
<!-- 第二部分 -->
<div class='all'>
     <ul>
         <li><img src="./img/banner2.jpg"></li>
         <li><img src="./img/banner3.jpg"></li>
         <li><img src="./img/banner4.jpg"></li>
         <li><img src="./img/banner5.jpg"></li>
     </ul>
</div>
<!--  导航部分 -->
<nav>
	<div class="nav-row">
		 <div class="nav-row-pic">
		 	<img src="./img/tianmao.png">
		 	<p>天猫</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/chong.png">
		 	<p>很划算</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/tianmao.png">
		 	<p>天猫</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/waimai.png">
		 	<p>外卖</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/tianmao.png">
		 	<p>天猫超市</p>
		 </div>
	</div>
	<div class="nav-row">
		  <div class="nav-row-pic">
		 	<img src="./img/chaoshi.png">
		 	<p>充值中心</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/tianmao.png">
		 	<p>天猫旅行</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/jinkou.png">
		 	<p>领金币</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/daojia.png">
		 	<p>天猫刀尖</p>
		 </div>
		 <div class="nav-row-pic">
		 	<img src="./img/fenlei.png">
		 	<p>分类</p>
		 </div>
	</div>
</nav>
<!-- 淘宝头条 -->
<div class="news">
	<span class="n-pic">
		<img src="/taobao/img/toutiao.png">
	</span>
	<p class="p1">最新</p>
	<p class="p2">上市新品买一送一！</p>
</div>
<!-- 疯狂抢购 -->
<div class="hot">
	<div class="hot-left">
		<img src="./img/taoqiangou.jpg">
	</div>
	<div class="hot-right">
		<div class="hot-pic">
			<img src="./img/goods-7.jpg">
		</div>
		<div class="hot-pic">
			<img src="./img/bimaiqingdan.png">
		</div>
		<div class="hot-pic">
			<img src="./img/aiguangjie.jpg">
		</div>
		<div class="hot-pic">
			<img src="./img/goods-4.jpg">
		</div>
	</div>
</div>
<!-- 猜你喜欢啥 -->
<div class='guess'>
    <div class="top">
    	 <div class="guess-pic">
		       <img src="./img/xin.png" alt="">
	       </div>
	       <div class="guess-text">
		       <p>猜你喜欢</p>
	       </div>
	       <p>试试推荐适合你的</p>
    </div>
	<div class="guess-item">
		<img src="./img/goods-5.jpg">
		<p>给你推荐17年的某地大枣，非常好吃</p>
		<b>￥199.9</b>
	</div>
	<div class="guess-item">
		<img src="./img/goods-2.jpg">
		<p>给你推荐17年的某地大枣，非常好吃</p>
		<b>￥1999.9</b>
	</div>
	<div class="guess-item">
		<img src="./img/goods-4.jpg">
		<p>给你推荐17年的某地大枣，非常好吃</p>
		<b>￥19.9</b>
	</div>
	<div class="guess-item">
		<img src="./img/goods-6.jpg">
		<p>给你推荐17年的某地大枣，非常好吃</p>
		<b>￥219.9</b>
	</div>      
</div>
<!-- 这是最后面 -->
<footer>
	<div class="btn">
	       <a>登录</a>
	       <a>注册</a>
	       <a>电脑吧</a>
	       <a>用户反馈</a>
	</div>
	<div class="copy">
		<p>&copy; 浙 b2-20170305 服务支持</p>
	</div>
</footer>
</div>
<!-- 下方功能键区 -->
    <div class="shop">
    	 <div class="shops">
		     <i class="iconfont icon-zhuye"></i>
		     <p>首页</p>
	     </div>
	     <div class="shops">
		     <i class="iconfont icon-wuliu"></i>
		     <p>物流</p>
	     </div>
	     <div class="shops">
		     <i class="iconfont icon-tubiao4"></i>
		     <p>购物车</p>
	     </div>
	     <div class="shops">
		     <i class="iconfont icon-iconfontwodea-copy"></i>
		     <p>我的淘宝</p>
	     </div>
	     <div class="shops">
		     <i class="iconfont icon-sangedian"></i>
		      <p>更多</p>
	     </div>
    </div>  

<script src="./js/js-1.js"></script>
<script src="./zepto/src/zepto.js"></script>
<script src="./zepto/src/event.js"></script>
<script src="./zepto/src/fx.js"></script>
<script src="./zepto/src/touch.js"></script>
<script>
 document.body.addEventListener('touchmove',function(e){
     e.preventDefault();
 },false);
 // 下面轮播
	setInterval(function(){
		 $('ul>li:nth-child(4)').animate({opacity:0},1800,function(){
		 	$('ul>li:nth-child(4)').prependTo('ul').css({opacity:1});
		 })
	},4000)

 var startY = 0,
     endY = 0,
     dis= 0,
     mt = 0;
 var ba = document.getElementsByTagName('body')[0];
 var view = document.getElementsByClassName('juzhong')[0];
 ba.addEventListener('touchstart', function(e) {
    startY = e.changedTouches[0].pageY;
 }, false);

 ba.addEventListener('touchmove', function(e) {
    endY = e.changedTouches[0].pageY;
    dis = endY - startY;
    mt = parseInt(view.style.marginTop);
       // if (mt >= 300) {
       //    return false;
       // };
    view.style.marginTop = mt + dis + 'px';
    startY = endY;
 },false);
 ba.addEventListener('touchend', function(e) {
    if (mt >= 0) {
        var step = mt / 150;
        var clock = setInterval(function() {
            mt = mt - step;
            if (mt <= 0) {
                view.style.marginTop = 0 + 'px';
                clearInterval(clock);
            } else {
                view.style.marginTop = mt + 'px';
            }
        }, 5)
    }
 }, false)
</script>
</body>
</html>